<template>
	<!--重点企业商业谱系-->
	<div class="business-pedigree">
		<div class="buttons">
			<li @click="smallClick"></li>
			<li @click="bigClick"></li>
			<li @click="resetClick"></li>
		</div>
		<chart-block chartID="chart1" :title="RelationMapOptionData.title" :optionData="RelationMapOptionData" chartType="getRelationMap" height="67vh" style="padding:0;background:rgba(12,51,127,0);border:none;box-shadow: none;" :isTitle="false" ref="charts" @ChartClick="ChartClick"></chart-block>
	</div>
</template>

<script>
import {getTpList} from '@/api/pages.js'

export default {
	name: "business-pedigree",
	components: {
		ChartBlock: () => import('@/components/chart-block')
	},
	props: {},
	data() {
		return {
			RelationMapOptionData: {
				title: "",
				seriesData: {
					leftList: [{data: [{id: "", name: ""}], name: ""}],
					rightList: [{data: [{id: "", name: ""}], name: ""}]
				}
			},
			seriesData: {},
			zoom: 1,
			companyId: this.$route.query.companyId,
		}
	},
	computed: {},
	created() {
		// this.RelationMapOptionData.seriesData=this.seriesData
	},
	mounted() {
		this.getTpList(this.companyId)
	},
	methods: {
		// 缩小
		smallClick() {
			this.zoom -= 0.1
		},
		// 放大
		bigClick() {
			this.zoom += 0.1
		},
		// 重置
		resetClick() {
			this.zoom = 1
		},
		ChartClick(e) {
			// this.$router.push({
			// 	path: '/enterprise/tabswich/childPage',
			// 	query: {
			// 		tabIndex: 2,
			// 		companyId: this.companyId,
			// 		name: e.name,
			// 		indexId: e.data.indexId
			// 	}
			// })
		},
		// 商业谱系
		getTpList(qyId) {
			getTpList(qyId).then(res => {
				if (res.data.code === 200) {
					console.log(JSON.stringify(res.data))
					this.seriesData = res.data.data.seriesData
					this.RelationMapOptionData = {
						title: sessionStorage.getItem('companyName'),
						zoom: 1,
						seriesData: res.data.data.seriesData,
						focusNodeAdjacency: true,//是否联动高亮
					}
				}
			}).catch(err => {

			})
		}
	},
	watch: {
		zoom() {
			let _this = this
			this.RelationMapOptionData = {
				title: sessionStorage.getItem('companyName'),
				zoom: _this.zoom,
				seriesData: _this.seriesData
			}
		}
	}
}
</script>

<style scoped lang="scss">
.business-pedigree {
	position: relative;

	.buttons {
		width: 7vw;
		height: 3.2vh;
		position: absolute;
		right: 0;
		top: 0;
		background: url(../../assets/images/buttons.png);
		background-size: 100% 100%;
		z-index: 9999999;

		li {
			list-style: none;
			width: 33.333%;
			height: 100%;
			float: left;
			cursor: pointer;
		}
	}
}
</style>
